<div id="tab-raw">
	<div class="row-fluid">
		<div class="span1">
			<b>HTTP Method</b>
		</div>
		<div class="span2">
			<b>Server</b>
		</div>
		<div class="span1">
			<b>Operation</b>
		</div>
		<div class="span2">
			<b>Database</b>
		</div>
		<div class="span4">
			<b>Argument(s)</b>
		</div>
		<div class="span2"></div>
	</div>
	<div class="row-fluid">
		<div class="span1">
			<select id="rawMethod" class="input-small">
				<option value='GET'>GET</option>
				<option value='PUT'>PUT</option>
				<option value='POST'>POST</option>
				<option value='DELETE'>DELETE</option>
			</select>
		</div>
		<div class="span2" id="rawServer">http://localhost:2480/</div>
		<div class="span1">
			<select id="rawOperation" class="input-small">
				<option value='cluster'>cluster</option>
				<option value='class'>class</option>
				<option value='command'>command</option>
				<option value='connect'>connect</option>
				<option value='database'>database</option>
				<option value='dictionary'>dictionary</option>
				<option value='disconnect'>disconnect</option>
				<option value='document'>document</option>
				<option value='index'>index</option>
				<option value='query'>query</option>
				<option value='allocation'>allocation</option>
				<option value='server'>server</option>
			</select>
		</div>
		<div class="span2">
			<input id="rawDatabase" value="demo" style="width: 170px;" />
		</div>
		<div class="span4">
			<input id="rawArgs" class="input-xlarge" style="width: 350px;" value="Address" />
		</div>
		<div class="span2">
			<button onclick="javascript:executeRawCommand()" class="btn btn-primary btn-big">
				Execute <img border="0" alt="Execute" src="images/execute.png" />
			</button>
		</div>
	</div>
	<div class="row-fluid btn-group noborder">
		<button class="btn" onClick="javascript:rawEditor.setCode('')" style="width: 90px; text-align: center">
			Clear <img border="0" alt="Graph result" src="images/clear.png" align="top" />
		</button>
		<button class="btn" onClick="javascript:rawEditor.reindent();" style="width: 90px; text-align: center">
			Indent <img border="0" alt="Graph result" src="images/indent.png" align="top" />
		</button>
		<button id="editRaw" class="btn" style="width: 90px; text-align: center">
			Edit <img border="0" alt="Edit record" src="images/set.png" align="top" />
		</button>
		<button id="graphRaw" class="btn" style="width: 90px; text-align: center">
			Graph <img border="0" alt="Graph result" src="images/graph.png" align="top" />
		</button>
	</div>
	<div class="row-fluid">
		<div class="span12" style="border: 1px solid gray; width: 100%;">
			<textarea id="rawOutput" cols="130" rows="22" title="value">
                                    </textarea>
		</div>
	</div>
</div>

<script>
	rawEditor = CodeMirror.fromTextArea('rawOutput', {
		width : "auto",
		height : "350px",
		parserfile : [ "tokenizejavascript.js", "parsejavascript.js" ],
		stylesheet : "styles/codemirror/jscolors.css",
		path : "js/codemirror/",
		textWrapping : true,
		json : true
	});

	$("#editRaw")
			.click(
					function() {
						var raw = rawEditor.getCode();
						if (raw == null || raw.length == 0)
							return;

						try {
							var result = jQuery.parseJSON(raw);
							if (result != null)
								displayDocument(result.result != null ? result.result[0]
										: result);
						} catch (e) {
							alert("Error on parsing result:" + e);
						}
					});

	$("#graphRaw").click(
			function() {
				var raw = rawEditor.getCode();
				if (raw == null || raw.length == 0)
					return;

				try {
					var result = jQuery.parseJSON(raw);
					if (result != null)
						displayGraph(result.result != null ? result.result[0]
								: result);
				} catch (e) {
					alert("Error on parsing result:" + e);
				}
			});

	// SET SAVED VALUES
	var previous = controller.parameter('rawMethod');
	if (previous != null)
		$('#rawMethod').val(previous);
	previous = controller.parameter('rawOperation');
	if (previous != null)
		$('#rawOperation').val(previous);
	previous = controller.parameter('rawDatabase');
	if (previous != null)
		$('#rawDatabase').val(previous);
	else
		$("#rawDatabase").val($("#header-database").val());
	previous = controller.parameter('rawArgs');
	if (previous != null)
		$('#rawArgs').val(previous);
	previous = controller.parameter('rawOutput');
	if (previous != null) {
		rawEditor.setCode(previous);
		rawEditor.reindent();
	}

	function executeRawCommand() {
		startTimer();

		var code = rawEditor.getCode();

		var req = $('#header-server').val() + '/' + $('#rawOperation').val();
		if ($('#rawDatabase').val() != null
				&& $('#rawDatabase').val().length > 0)
			req += '/' + $('#rawDatabase').val();
		if ($('#rawArgs').val() != null && $('#rawArgs').val().length > 0)
			req += '/' + $('#rawArgs').val();

		$.ajax({
			type : $('#rawMethod').val(),
			url : req,
			data : code,
			contentType : "application/json; charset=utf-8",
			processData : false,
			cache : false,
			dataType : 'text',
			success : function(msg) {
				rawEditor.setCode(msg);
				rawEditor.reindent();
				controller.parameter('rawOutput', msg);
				jQuery("#output").val(
						"Raw command executed in " + stopTimer() + " sec.");
			},
			error : function(msg) {
				rawEditor.setCode("");
				jQuery("#output").val("Command response: " + msg);
			}
		});

		// SAVE VALUES IN SESSION
		controller.parameter('rawMethod', $('#rawMethod').val());
		controller.parameter('rawOperation', $('#rawOperation').val());
		controller.parameter('rawDatabase', $('#rawDatabase').val());
		controller.parameter('rawArgs', $('#rawArgs').val());
	}
</script>